<template>
  <div class="container">
    <!--<tab active-color="#d9332e" :lineWidth="2">-->
    <!--<tab-item @click.native="itemClick(index)" v-for="(item,index) in tabList" :key="index" :selected="index === 0">-->
    <!--{{item.title}}-->
    <!--</tab-item>-->
    <!--&lt;!&ndash;<tab-item v-for="n in 8" :key="n" :selected="n===1">已发货{{ n }}</tab-item>&ndash;&gt;-->
    <!--</tab>-->
    <div class="t_z_record">
      <div class="allmsgBox flex-list vux-1px-b">
        <div class="allmsg_item flex-grow-0 vux-1px-l">
          <span>总场次</span>
          <p>{{topdata.allBetGameNumber}}</p>
        </div>
        <div class="allmsg_item flex-grow-0 vux-1px-l">
          <span>胜场</span>
          <p>{{topdata.winGameNumber}}</p>
        </div>
        <div class="allmsg_item flex-grow-0 vux-1px-l">
          <span>流局</span>
          <p>{{topdata.invalidGameNumber}}</p>
        </div>
        <div class="allmsg_item flex-grow-0 vux-1px-l">
          <span>胜率</span>
          <p>{{topdata.winingPercent}}</p>
        </div>
        <div class="allmsg_item flex-grow-0 vux-1px-l">
          <span>盈亏</span>
          <p class="red">{{topdata.profit_loss}}</p>
        </div>
      </div>
    </div>
    <div>
      <p class="touzhu-detail padding-left">投注详情</p>
      <div v-for="(item,index) in matchlist" class="item-list vux-1px-b">
        <p class="title-p padding-left" v-if="item.game_data"><span>{{item.game_data.start_time}}</span> <span
                style="margin-left: 0.2rem">{{item.game_data.big_game_name}}</span> <span>投注金额<span
                class="red"> ￥{{item.wager}}</span></span></p>
        <div class="flex-row">
          <div class="flex-grow-1 row-item">
            <div v-if="item.game_data" class="match-title padding-left">
              <p class="oneLine">{{item.game_data.play_a_name}}</p>
              <p class="red">VS</p>
              <p class="oneLine">{{item.game_data.play_b_name}}</p>
              <!--<span></span><br><span class="red"></span><br> <span></span>-->
            </div>
          </div>
          <div class="flex-grow-1 row-item">
            <div v-for="(item2,i2) in item.bet_data" class="flex-row center-list">
              <div class="flex-grow-1">{{item2.betType_name}}</div>
              <div class="flex-grow-1 flex-right">{{item2.play_type}}</div>
            </div>
          </div>
          <div class="flex-grow-1 row-item">
            <div v-if="item.isWin==0" :class="item.isWin==0?'huise':''" class="result-right">即将揭晓</div>
            <div v-if="item.isWin==1" :class="item.isWin==0?'green':''" class="result-right">赢</div>
            <div v-if="item.isWin==2" :class="item.isWin==0?'red':''" class="result-right">负</div>
            <div v-if="item.isWin==3" :class="item.isWin==0?'huise':''" class="result-right">流局</div>
            <!--<div v-for="(item3,i3) in item.bet_data" class="flex-row right-list">-->
            <!--<div class="flex-grow-1" v-if="item3.isWin==0">即将揭晓</div>-->
            <!--<div class="flex-grow-1" v-if="item3.isWin==1">赢</div>-->
            <!--<div class="flex-grow-1" v-if="item3.isWin==2">负</div>-->
            <!--<div class="flex-grow-1" v-if="item3.isWin==3">流局</div>-->
            <!--</div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="no_data" v-show="show_no_data">---- 暂无投注相关信息 ----</div>
  </div>
</template>

<script>
  document.title = '投注详情';
  import {Tab, TabItem} from 'vux'
  import {USERTOUZHURECORD} from 'src/const/uri'

  export default {
    name: "userCenter",
    components: {Tab, TabItem},
    data() {
      return {
        tabList: [
          {title: "投注记录"},
          {title: "交易记录"}
        ],
        itemIndex: 0,
        uid: '',
        topdata: {},
        matchlist: [],
        show_no_data: false
      }
    },
    watch: {
      matchlist(val) {
        if (val.length > 0 && val) {
          this.show_no_data = false
        } else {
          this.show_no_data = true;
        }
      }
    },
    async mounted() {

      // getuid
      if (window.android) {
        this.uid = window.android.getUid();
        // window.localStorage.setItem('jcyy_uid',uid);
        await this.initData();
        // alert(uid)
      } else {
        window['getUserToken'] = (token, u_id) => {
          this.uid = u_id;
          this.initData();
        };
      }
      if (isDebug) {
        this.uid = window.localStorage.getItem('jcyy_uid');
        await this.initData();
      }
      await this.getCartCont();
    },
    methods: {
      itemClick(index) {
        this.itemIndex = index;
      },
      initData() {
        this.$ajax.get(USERTOUZHURECORD, {
          uid: this.uid
        }).then(res => {
          console.log(res.data);
          this.topdata = res.data.top_data;
          this.matchlist = res.data.bet_data;
        })
      }
    }
  }
</script>
<style>
  body {
    padding-bottom: .5rem;
  }
</style>
<style scoped lang="less">
  .t_z_record {
    /*margin-top: .2rem;*/
  }

  .allmsgBox {
    /*padding:.24rem;*/
  }

  .allmsg_item {
    padding-top: .2rem;
    width: 20%;
    /*width: 1.2rem;*/
    text-align: center;
    /*background: #CFE4A7;*/
    height: 1.4rem;
    border-radius: 5px;
    font-size: .24rem;

    &:first-child {
      &.vux-1px-l:before {
        border-left: 1px solid transparent;
      }
    }

    > p {
      font-size: 0.24rem;
      margin-top: 0.2rem;
    }


    > span {
      font-size: 0.28rem;
    }
  }

  .touzhu-detail {
    font-size: .28rem;
    margin: .2rem 0;
  }

  .padding-left {
    padding-left: .2rem;
  }

  .title-p {
    font-size: .24rem;
    margin: .1rem 0;
    color: #999;
  }

  .match-title {
    font-size: .28rem;

    .red {
      font-size: .32rem;
    }
  }

  .item-list {
    padding-bottom: .1rem;

    &.vux-1px-b:after {
      border-color: @bordercommonColor;
    }
  }

  .row-item {
    width: 33.3%;

    .center-list {
      height: .6rem;
      line-height: 0.6rem;
      background-color: #F0F4F7;
      font-size: .24rem;
      padding: 0 .1rem;
      margin-bottom: 1px;

      &:last-child {
        margin-bottom: 0;
      }

      /*> div {*/

      /*margin-top: 1px;*/
      /*&:first-child{*/
      /*margin-top: 0;*/
      /*}*/
      /*position: relative;*/

      /*&:after {*/
      /*content: " ";*/
      /*position: absolute;*/
      /*left: 0;*/
      /*bottom: 0;*/
      /*right: 0;*/
      /*height: 1px;*/
      /*border-bottom: 1px solid #ccc;*/
      /*transform-origin: 0 100%;*/
      /*transform: scaleY(0.5);*/
      /*}*/

      /*&:last-child{*/
      /*&:after{*/
      /*border-bottom: 1px solid transparent;*/
      /*}*/
      /*}*/
      /*}*/
    }


    .result-right {
      height: .6rem;
      line-height: 0.6rem;

      color: #fff;
      font-size: .32rem;
      /*margin-top: 1px;*/
      text-align: center;
      /*&:first-child{*/
      /*margin-top: 0;*/
      /*}*/
      position: relative;

      &.huise {
        background: #999999;
      }

      &.green {
        background-color: #009E16;
      }

      &.win {
        background-color: red;
      }

      &:after {
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #ccc;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
      }
    }
  }

</style>